<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>绑定样式</title>
    <script src="../js/vue.js"></script>
    <style>
        .riyu{
            border: 3px solid black;
        }
        .classA{
            background-color: skyblue;
        }
        .classB{
            color: red;
        }
        .classC{
            text-shadow: 2px 2px 3px yellow;
        }
    </style>
</head>
<body>
    
    <div id="root">
        <!-- class的字符串写法 适用于: 类名不确定,需要动态过去 -->
        <h2 class="riyu" :class="myStyle">{{title}}</h2>

        <!-- class的对象写法: 适用于: 类名确定，但不确定用不用 -->
        <h2 class="riyu" :class="{classB:hasB, classC: hasC}">{{title}}</h2>

         <!-- class的三目元运算符: 适用于: 类名确定，但不确定用不用 -->
         <h2 class="riyu" :class="hasB ? 'classB' : '' ">{{title}}</h2>

          <!-- class的数组写法: 适用于: 同时应用多个class -->
          <h2 class="riyu" :class="['classA', 'classB', 'classC']">{{title}}</h2>

           <!-- class的数组写法: 适用于: 同时应用多个class -->
           <h2 class="riyu" :class="[a,b,c]">{{title}}</h2>

            <!-- 绑定style 要用小驼峰,不能写成 font-size 的形式 -->
            <h2 class="riyu" :class="[a,b,c]" :style="{fontSize: size+'px'}">{{title}}</h2>

    </div>

    <script>

        new Vue({
            el: '#root',
            data: {
                title: '0922好好学习日语',
                myStyle: 'classA',
                hasB: true, //标识是否使用classB样式
                hasC: true,
                a: 'classA',
                b: 'classB',
                c: 'classC',
                size: 30
            }
        })
    </script>
</body>
</html>